<template>
    <div class="recharge">
        <div class="recharge_content">
            <div class="recharge_text"><span>请输入充值金额</span></div>
            <div class="recharge_m">
                <span>￥</span>
                <input type="Number" v-model="money" name="" id="">
            </div>
            <div class="recharge_on">
                <span>余额￥{{price}}</span>
            </div>
            <button class="btn" @click="_sendBeforeCheck">下一步</button>
        </div>
    </div>
</template>

<script>
    import {request} from '@/wxRequest/requestApi'

    export default {
        data() {
            return {
                price: '',//余额
                openId: '',//openID
                money: '',//金额
            }
        },
        onShow() {
            this._getBalance()
            this._getOpenId()
        },
        methods: {
            /**
             * 获得余额
             * @private
             */
            _getBalance() {
                let params = {
                    url: '/balance/queryBalance',
                    method: 'POST',
                    data: {
                        userId: wx.getStorageSync('userId'),
                    },
                }

                request(params).then(re => {
                    if (re.status === 0) {
                        this.price = re.data
                    } else {
                        this.$Message.error(re.msg)
                    }
                })
            },
            /**
             * 获得OpenId
             * @private
             */
            _getOpenId() {
                wx.login({
                    success: res => {
                        let getParams = {
                            url: '/login',
                            data: {
                                code: res.code,
                            },
                            method: 'POST',
                        }
                        this.$JZFormdata(getParams).then(re=>{
                            this.openId = re.data.openid
                        })
                    },
                })
            },
            /**
             * 充值前验证
             * @private
             */
            _sendBeforeCheck() {
                if (this.money === '') {
                    wx.showModal({
                        title: '提示',
                        content: '请输入充值余额',
                    })
                    return
                }

                if (this.money <= 0) {
                    wx.showModal({
                        title: '提示',
                        content: '充值余额不合法',
                    })
                    return
                }
                this._sendBalance()
            },
            /**
             * 发送请求
             * @private
             */
            _sendBalance() {
                let params = {
                    url: '/balance/recharge',
                    method: 'POST',
                    data: {
                        userId: wx.getStorageSync('userId'),
                        money: this.money,
                        openId: this.openId,
                    },
                }

                request(params).then(re => {
                    if (re.status === 0) {
                        this.price = re.data
                    } else {
                        wx.showModal({
                            title: '提示',
                            content: re.msg,
                        })
                    }
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.recharge{
    width: 100%;
    margin-top: 20rpx;
    .recharge_content{
        width: 80%;
        height: 253px;
        margin: auto;
        background: #fff;
        padding: 20px;
        .recharge_text{
            span{
                color: #989898;
                font-size: 14px;
            }
        }
        .recharge_m{
            display: flex;
            align-items: center;
              border-bottom: 1px solid #E1E1E1;
              height: 80rpx;
              line-height: 80rpx;
            span{
                font-size: 25px;
                font-weight: 800;
            }
            input{
                flex: 1;
                display: inline-block;

            }
        }
        .recharge_on{
            height: 30px;
            margin-top: 20rpx;
            span{
                color: #323232;
                font-size: 13px;
            }
        }
        .btn{
            margin-top: 60rpx;
            background: #FECB55;
        }
    }
}
</style>

